<!--
 * @description  : 文书配置组件
 * @descriptionDetail: 文书配配置组件
 * @copyright    : 浙江烟草
 * @author       : lcm
 * @create       : 2022-09-27 09:58:58
-->

<template>
  <view style="padding-bottom:50px">
    <theme-navbar
      :is-white="false"
      :title="'文书审批'"
      :isBack="false"
      style="z-index: 99999"
    >
      <view class="nav-right-icon" @click="$emit('close')">
        关闭
      </view>
    </theme-navbar>
    <u-collapse ref="cons">
      <u-collapse-item @change="changeHeight()">
        <template #title>
          <u-row>
            <u-col span="12">
              <!-- <u-icon color="#2979ff" name="order" size="40" label="业务详情">
              </u-icon> -->
              <view style="width: 8rpx;height: 32rpx;background: #0079F2;opacity: 1;border-radius: 4rpx;float:left;margin-left:32rpx;margin-right:16rpx;"></view>
              <view style="height: 32rpx;line-height: 32rpx;text-align:center;float:left">
                业务详情
              </view>
            </u-col>
          </u-row>
        </template>
        <!-- 动态文书详情组件 -->
        <component :is="docConfig.docCode" :docIns="docIns" :flowFormCode="docConfig.flowFormCode" :stepCode="stepCode" :approve="approve" :documentDoc="documentDoc" style="margin-left: 15px;"></component>
      </u-collapse-item>
      <!-- 流程记录 -->
      <u-collapse-item :open="false" @change="changeHeight()">
        <template #title>
          <u-row>
            <u-col span="12">
              <view style="width: 8rpx;height: 32rpx;background: #0079F2;opacity: 1;border-radius: 4rpx;float:left;margin-left:32rpx;margin-right:16rpx;"></view>
              <view style="height: 32rpx;line-height: 32rpx;text-align:center;float:left">
                业务流程
              </view>
            </u-col>
          </u-row>
        </template>
        <view style="margin-left:20px;">
          <u-time-line>
            <u-time-line-item nodeTop="10" v-for="(item,index) in approve" :key="index"> 
              <template #node>
                <view v-if="item.opType == '1'" class="u-node" style="background: #19be6b;">
                  <!-- 此处为uView的icon组件 -->
                  <u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
                </view>
              </template>
              <!-- 此处没有自定义左边的内容，会默认显示一个点 -->
              <template #content>
                <view>
                  <view class="u-order-time">
                    <u-icon name="clock" v-if="item.opType == '1'" :size="30"></u-icon>
                    <span style="margin-right:5%;">
                      {{ item.opTime }}  {{ item.gfaName }}                     
                    </span>
                    <span>
                      {{ item.approvePersonName }}
                    </span>
                  </view>
                  <view class="u-order-desc">
                    {{ item.approveInfo||'' }}
                  </view>
                </view>
              </template>
            </u-time-line-item>
          </u-time-line>
        </view>
      </u-collapse-item>
    </u-collapse>
    <!-- 当前操作节点 -->
    <!-- 文书节点组件 -->
    <component
      :is="computedApproveCompName()" 
      :docIns="docIns"
      :step="documentDoc.step"
      :flowFormCode="docConfig.flowFormCode"
      :stepCode="stepCode"
      :approve="approve"
      :documentDoc="documentDoc"
      style="margin-left: 15px;"
    ></component>
  </view>
</template>

<script>
import approvalService from "@/service/internal/approval.service.js";
import util from "@/common/util.js";
import commonService from "@/service/internal/common.service";
// import { ZDictSelect, ZDate, UploadImages, } from "@/components";
export default {
  name: "DocDialog",
  components: {  },
  props:{
    docInsUuid:{
      type:String,
      default:"",
    },
    bizUuid: {
      type:String,
      default:"",
    },
  },
  data() {
    return {
      materialFileLst:[],
      materialCount: 0, // 附件数量
      docNo:'',
      personChoseVisible:false,
      nextPersonInfo:{},
      defaultAttrCode: util.uuid(),
      isLoading:false,
      currApprove:{},
      approve:[],
      documentDoc:{ },
      docIns:{},
      docConfig:{},
      titemUuid:'',
      stepCode:"",
      uploadFile: commonService.uploadFile,
      delUrl: commonService.deleteFile,
    };
  },
  computed: {
    computedApproveCompName() {
      return () => this.docConfig.docCode ? this.docConfig.docCode + 'Approve' : "";
    },
  },
  watch: {
    docInsUuid(v) {   // 文书实例uuid
      console.log("文书实例uuid", v);
      this.getDocInfo();
    },
  },
  mounted () {
    console.log("文书加载了mounted");
    this.getDocInfo();
  },
  onLoad(){
    console.log("文书加载了");
  },
  onReady() {
    // this.$refs.uForm.setRules(this.rules);
    console.log("文书加载了onReady");
  },
  methods: {
    changeHeight(){ 
      this.$nextTick(() => {
        this.$refs.cons.init();
      })
    },
    /**
     * 获取文书的配置信息和文书的抽象信息和具体信息
     */
    getDocInfo() {
      this.$modal.showLoading('文书信息加载中...');
      if(this.docInsUuid) {
        approvalService.getSdocById({docInsUuid: this.docInsUuid,}).then(r => {
          if(r.success) {
            this.documentDoc = r.bean;
            console.log("documentDoc",r.bean)
            this.docConfig = r.bean.configIns;
            Promise.all([this.getDoc(), this.getFlowNode(),]).then(() => this.$modal.hideLoading());
          } else{
            this.$modal.hideLoading();
            this.$u.toast(r.msg);
          }
        });
      } else {
        this.$modal.hideLoading();
        this.$u.toast("参数异常");
      }
    },
    getDoc() {
      return approvalService.getDoc({id: this.docInsUuid, docUuid: this.documentDoc.docUuid, bizUuid: this.documentDoc.bizUuid,},this.docConfig.controllerPath).then(r => {
        if(r.success) {
          let docData = r.data || [];
          let docIns = {};
          docData.forEach(d => {
            Object.assign(docIns,d);
          });
          this.docIns = docIns;
          this.docNo = docIns.fullDocNo;
        }
      });
    },
    /**
     * 获取文书的所有节点
     */
    getFlowNode(){
      return approvalService.getFlowNode({docUuid: this.documentDoc.docUuid ,id: this.docInsUuid ,}).then(r => {
        if(r.success) {
          let nodes = r.data;
          let curStep = this.documentDoc.step;
          for (let i = 0; i < nodes.length ; i++) {
            let a = nodes[i];
            a.isLast = i === nodes.length - 1;
            if(a.gfaCode === curStep) {
              a.current = true;
              this.currApprove = a;
            }
          }
          this.approve = nodes;
          this.stepCode = this.getstepCode(this.approve,this.documentDoc.step)
        } else {
          this.$u.toast(r.msg);
        }
      });
    },
    getstepCode(arr,step){
      let stepCode = ''
      if(arr.length < 0) return
      arr.forEach((item,index,arr) => {
        if(item.gfaCode == step){
          if(index + 1 >= arr.length){
            stepCode = ''
            return 
          }
          // console.log('循环',item,index,arr)
          stepCode = arr[index + 1].gfaCode
        }
      })
      return stepCode
    },
  },
};
</script>

<style lang="scss" scoped>
</style>